<!--
 * @Author: wangzhichiao<https://github.com/wzc570738205>
 * @Date: 2020-05-13 17:18:49
 * @LastEditors: wangzhichiao<https://github.com/wzc570738205>
 * @LastEditTime: 2020-05-14 15:40:16
 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.3.0"></script>
</head>
<body>
    <div style="text-align:center"> 
        <button onclick="playPause()">播放/暂停</button> 
      
        <br> 
        <video id="video1" width="420" controls  >
          您的浏览器不支持 HTML5 video 标签。
        </video>
      </div> 


      <div class="a">
        <video id="video" controls preload="auto" src="https://www.runoob.com/try/demo_source/mov_bbb.mp4"></video>
    </div>
    <script>
           /*  var video = document.querySelector('#video');
            var mediaSource = new MediaSource();
            video.src = URL.createObjectURL(mediaSource);
            mediaSource.addEventListener('sourceopen', sourceOpen);

            function sourceOpen(e) {
                URL.revokeObjectURL(video.src);
                // 设置 媒体的编码类型
                var mime = 'video/webm; codecs="vorbis,vp8"';
                var mediaSource = e.target;
                var sourceBuffer = mediaSource.addSourceBuffer(mime);
                var videoUrl = 'http://114.113.112.25:88/proxy/upload-file/download/Z3JvdXAxL00wMC8wOS8xNy9yQkRxNUY2WkNUeUFIelIyQUJvSlVJakN6Y3M4MzYubXA0';
                fetch(videoUrl).then(function(response) {
                        console.log(response)
                        return response.arrayBuffer();
                    })
                    .then(function(arrayBuffer) {
                        sourceBuffer.addEventListener('updateend', function(e) {
                            if (!sourceBuffer.updating && mediaSource.readyState === 'open') {
                                mediaSource.endOfStream();
                                // 在数据请求完成后，我们需要调用 endOfStream()。它会改变 MediaSource.readyState 为 ended 并且触发 sourceended 事件。
                                video.play().then(function() {}).catch(function(err) {
                                    console.log(err)
                                });
                            }
                        });
                        sourceBuffer.appendBuffer(arrayBuffer);
                    });
            } */
</script>
</body>
</html>
<script>
    var vConsole = new VConsole();
var myVideo = document.getElementById("video1");
axios({
            method: "get",
            responseType: 'blob',
            url: 'https://www.runoob.com/try/demo_source/mov_bbb.ogg',
        })
        .then((res) => {
            this.code = res;
            
            var blob = new Blob([res.data],{type:'video/webm; codecs="vorbis,vp8m'});
            this.src = URL.createObjectURL(blob)
            
            myVideo.src = this.src
            alert(this.src)

        })
        .catch((err) => {

        });


function playPause() {
    myVideo.play();
   

}
</script>